<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>07_元素遍历</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<!-- 元素遍历：用于DOM数中遍历元素 【理解：针对元素嵌套，父子级】
		              children()------功能：获取匹配元素集合中每个元素的子元素
					  parent()--------功能：获取匹配元素集合中每个元素的父元素
					  
					  siblings()------功能：获取匹配元素集合中每个元素的所有兄弟元素
					  
					  next()----------功能：获取匹配元素集合中每个元素的下一个兄弟元素
					  prev()----------功能：获取匹配元素集合中每个元素的上一个兄弟元素
					  
					  each()----------功能：遍历匹配元素集合--所有的子元素
					                        语法糖：each(function(index,element){
												       $(element).text(`${index}`)
													   注意：打印遍历的值，不可以使用单双引号+拼接
													   功能：获取到的元素，遍历元素内容
											       })
											       index：下标  element：元素  形参
		 -->
		 <style>
			 .container{
				 border: 3px solid #73d3ff;
				 margin: 10px;
				 padding: 10px;
			 }
			 .box{
				 background-color: #a2f0ff;
				 margin: 10px;
				 padding: 10px;
			 }
			 button{
				 margin: 10px;
			 }
		 </style>
	</head>
	<body>
		<dir class="container">
			<div class="box" id="box1">盒子1</div>
			<div class="box" id="box2">盒子2</div>
			<div class="box" id="box3">盒子3</div>
			<div class="box" id="box4">盒子4</div>
			<div class="box" id="box5">盒子5</div>
			<div class="box" id="box6">盒子6</div>
		</dir>
		<button id="childrenBtn">获取子元素</button>
		<button id="parentBtn">获取父元素</button>
		<button id="siblingsBtn">获取兄弟元素</button>
		<button id="nextBtn">获取下一个兄弟元素</button>
		<button id="prevBtn">获取上一个兄弟元素</button>
		<button id="eachBtn">遍历元素</button>
		
		<script>
			//1.点击 获取子元素 按钮，实现.container下所有子元素添加背景色
			$("#childrenBtn").click(function(){
				//通过 父找子 函数---添加效果
				$(".container").children().css("background-color","#b3d0ff");
			});
			
			//2.点击 获取父元素 按钮，实现.container 添加背景色
			$("#parentBtn").click(function(){
				$("#box1").parent().css("background-color","#ffffc7");
			});
			//3.点击 获取兄弟元素 按钮，实现除了#box4字体颜色不变，其他都变色
			$("#siblingsBtn").click(function(){
				$("#box4").siblings().css("color","#ff0004");
			});
			//4.点击 获取下一个兄弟元素 按钮，实现#box4下一个兄弟添加背景色
			$("#nextBtn").click(function(){
				$("#box4").next().css("background-color","#ffb3d2");
			});
			//5.点击 获取上一个兄弟元素 按钮，实现#box6上一个兄弟添加效果
			//                              圆、背景图、背景色、盒子阴影
			$("#prevBtn").click(function(){
				$("#box6").prev().css({"width":"200px",
				                       "height":"200px",
									   "border-radius":"50%",
									   "background-color":"#b7ffd2",
									   "background-image":"url(../img/mhls.png)",
									   "background-size":"100% 100%",
									   "filter":"drop-shadow(0 0 10px #a2a2a2)"
				});
			});
			
			//6.点击 遍历元素 按钮，实现每个盒子上，这是第n个盒子
			$("#eachBtn").click(function(){
				//通过 .box 抓到6个元素【一组集合】
				$(".box").each(function(i,e){  //e代表元素 i代表下标
					//每个盒子加文字：这是第n个盒子
					$(e).text(`这是第${i+1}个元素`);
				});
			});
		</script>
	</body>
</html>